
<script lang="js" setup>

import { ref } from "vue";
import { login } from "../../apis"
import { useRouter } from "vue-router";
import { ElMessage } from 'element-plus'

const router = useRouter();

const username = ref("");
// 判断用户名不能为空
const usernameErrorMessage = ref("")
const checkUsernameBlur = () => {
  // 密码正则表达式校验
  const usernameRegex = /\S+/;
  if (!usernameRegex.test(username.value)) {
    usernameErrorMessage.value = '用户名不能为空';
    return false;
  } else {
    usernameErrorMessage.value = '';
    return true;
  }
}
const checkUsernameFocus = () => {
  usernameErrorMessage.value = '';
}

const password = ref("");
// 判断密码是否符合要求
const passwordErrorMessage = ref("")
const checkPasswordBlur = () => {
  // 密码正则表达式校验
  const passwordRegex = /^(?=.*?[0-9])(?=.*?[A-Za-z])(?=.*?[!@#$%^&*])[\dA-Za-z!@#$%^&*]{6,18}$/;
  if (!passwordRegex.test(password.value)) {
    passwordErrorMessage.value = '密码只能由数字密码特殊字符组成, 且长度在6-18位之间';
    return false;
  } else {
    passwordErrorMessage.value = '';
    return true;
  }
}
const checkPasswordFocus = () => {
  passwordErrorMessage.value = '';
}

const email = ref("")
// 邮箱判断信息
const emailErrorMessage = ref('');
const checkEmailBlur = () => {
  // 简单的邮箱正则表达式校验
  const emailRegex = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
  if (!emailRegex.test(email.value)) {
    emailErrorMessage.value = '请输入正确的邮箱';
    return false;
  } else {
    // todo 判断邮箱是否被绑定.
    emailErrorMessage.value = '';
  }
}
const checkEmailFocus = () => {
  emailErrorMessage.value = '';
}

const x = () => {
  console.log("11")
  ElMessage({
    showClose: true,
    message: 'This is a message.',
    type: 'error',
    offset: 100
  })
}

// 发起登录请求
const userLogin = async () => {

  if (!checkUsernameBlur() || !checkPasswordBlur() || !checkEmailBlur()) {
    return;
  }

  let res = await login(username.value, password.value, email.value)

  if (res.code === 1) {
    ElMessage({
      showClose: true,
      message: '登陆成功!',
      type: 'error',
      offset: 100
    })
  } else {
    ElMessage({
      showClose: true,
      message: '登陆失败.',
      type: 'error',
      offset: 100
    })
  }
  console.log(res);
}

const test = async () => {
  console.log("test")
}

</script>


<template>

  <div class="login">
    <div class="login-container">
      <div class="login-header">
        <h2 class="login-tip">欢迎来到图书推荐系统 - 请登录</h2>
      </div>
      <div class="login-form">
        <form>
          <div class="form-group">
              <label for="username">用户名:</label>
              <input type="text" id="username" v-model="username" placeholder="请输入用户名"
                     @blur="checkUsernameBlur" @focus="checkUsernameFocus"/>
            <span class="username-tip" style="color: red; font-size: 14px; margin-top: 5px;">{{ usernameErrorMessage }}</span>
          </div>
          <div class="form-group">
            <label for="email">邮箱:</label>
            <input type="email" id="email" v-model="email" placeholder="请输入可用的邮箱"
                   @blur="checkEmailBlur" @focus="checkEmailFocus" />
            <span class="email-tip" style="color: red; font-size: 14px; margin-top: 5px;">{{ emailErrorMessage }}</span>
          </div>
          <div class="form-group">
            <label for="password">密码:</label>
            <input type="password" id="password" v-model="password" placeholder="请输入密码"
                   @blur="checkPasswordBlur" @focus="checkPasswordFocus" />
            <span class="password-tip" style="color: red; font-size: 14px; margin-top: 5px;">{{ passwordErrorMessage }}</span>

          </div>

          <button class="login-but" type="submit" @click="userLogin()">Login</button>
          <button class="register-but" @click="x">Register</button>
        </form>
      </div>
    </div>
  </div>
</template>

<style scoped>


.login {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-image: url("src/views/Login/images/background.jpg");
}

.login-container {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  width: 500px;
  height: 400px;
}

.login-header {
  background-color: #f5f5f5;
  padding: 10px;
  justify-content: space-between;
  align-items: center;
}

.login-tip {
  color: #333333;
  font-size: 24px;
  font-weight: 600;
  display: flex;
  justify-content: center;
  align-items: center;

}

.login-form {
  display: flex;
  flex-direction: column;
}

.form-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}

.form-group label {
  font-size: 14px;
  font-weight: 600;
  color: #333333;
  margin-bottom: 5px;
}

.form-group input {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 14px;
  color: #333333;
}

.login-but {
  padding: 10px;
  background-color: #007bff;
  color: #ffffff;
  border: none;
  border-radius: 5px;
  font-size: 14px;
  cursor: pointer;
}

.login-but:hover {
  background-color: #0056b3;
}
.login-but:active {
  background-color: #2c3e50;
}

.register-but {
  padding: 10px;
  background-color: #007bff;
  color: #ffffff;
  border: none;
  border-radius: 5px;
  font-size: 14px;
  cursor: pointer;
  margin-left: 20px;
}

.register-but:hover {
  background-color: #0056b3;
}
.register-but:active {
  background-color: #2c3e50;
}

/* 登录成功 / 失败提示框 */
.el-alert {
  margin: 20px 0 0;
}
.el-alert:first-child {
  margin: 0;
}

</style>
